<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>500 | Internal server error.</title>
    <!--引入vue.js-->
    <script src="/static/elementui/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 引入element ui 样式 -->
    <link rel="stylesheet" href="/static/elementui/index.css">
    <!-- 引入组件库 -->
    <script src="/static/elementui/index.js"></script>
</head>
<style>
    html{
        filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -webkit-filter: grayscale(1);
    }
    .wscn-http404-container{
        width: 100vw;
        height: 100vh;
    }
    .wscn-http404 {
        width: 80vw;
        margin: 0 auto;
        margin-top: 16vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pic-404 {
        position: relative;
        width: 40vw;
        overflow: hidden;
    }
    .pic-404__parent {
        width: 100%;
    }
    .pic-404__child {
        position: absolute;
    }
    .pic-404 .left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }
    .pic-404 .mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
    }
    .pic-404 .right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }
    @keyframes cloudLeft {
        0% {
            top: 17px;
            left: 220px;
            opacity: 0;
        }
        20% {
            top: 33px;
            left: 188px;
            opacity: 1;
        }
        80% {
            top: 81px;
            left: 92px;
            opacity: 1;
        }
        100% {
            top: 97px;
            left: 60px;
            opacity: 0;
        }
    }
    @keyframes cloudMid {
        0% {
            top: 10px;
            left: 420px;
            opacity: 0;
        }
        20% {
            top: 40px;
            left: 360px;
            opacity: 1;
        }
        70% {
            top: 130px;
            left: 180px;
            opacity: 1;
        }
        100% {
            top: 160px;
            left: 120px;
            opacity: 0;
        }
    }
    @keyframes cloudRight {
        0% {
            top: 100px;
            left: 500px;
            opacity: 0;
        }
        20% {
            top: 120px;
            left: 460px;
            opacity: 1;
        }
        80% {
            top: 180px;
            left: 340px;
            opacity: 1;
        }
        100% {
            top: 200px;
            left: 300px;
            opacity: 0;
        }
    }
    .bullshit {
        position: relative;
        float: left;
        width: 40vw;
        padding: 30px 0;
        overflow: hidden;
    }
    .bullshit__oops {
        font-size:60px;
        font-weight: bold;
        line-height: 40px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 20px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    .bullshit__headline {
        font-size: 20px;
        line-height: 24px;
        color: #222;
        font-weight: bold;
        opacity: 0;
        margin-bottom: 10px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
    }
    .bullshit__info {
        font-size: 13px;
        line-height: 21px;
        color: grey;
        opacity: 0;
        margin-bottom: 30px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }
    .bullshit__return-home{
        display: block;
        float: left;
        width: 120px;
        height: 36px;
        background: #1482f0;
        border-radius:30px;
        text-align: center;
        color: #ffffff;
        opacity: 0;
        font-size: 14px;
        line-height: 36px;
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
    }
    @keyframes slideUp {
        0% {
            transform: translateY(60px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @media screen and (max-width:600px){
        .pic-404{
            display: none;
        }
        .bullshit{
            width: 300px;
        }
    }
</style>

<body>
<div class="wscn-http404-container">
    <div class="wscn-http404">
        <div class="pic-404">
            <img class="pic-404__parent" src="/static/tzss-img/error_images/error.png" alt="">
            <img class="pic-404__child left" src="/static/tzss-img/error_images/cloud.png" alt="">
            <img class="pic-404__child mid" src="/static/tzss-img/error_images/cloud.png" alt="">
            <img class="pic-404__child right" src="/static/tzss-img/error_images/cloud.png" alt="">
        </div>
        <div class="bullshit">
            <div class="bullshit__oops">500!</div>
            <div class="bullshit__info"  th:text="${message}"></div>
            <div class="bullshit__headline"  th:text="${error}">Internal Server Error.</div>
            <div class="bullshit__info"> Something went wrong. Our technical team have been notified of the issue and we are looking into it. Please try again shortly or click the button below to return to the previous page.
            </div>
            <a href="javascript:history.back(-1)" class="bullshit__return-home">GO BACK</a>
        </div>
    </div>
</div>
</body>
</html>